<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蜗牛商城主页</title>

  <!-- 导入bootstrap文件 -->
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/jquery.min.js"></script>
  <script src="/js/popper.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>

  <script src="/js/jquery.cookie.js"></script>
  <script src="/js/index.js"></script>
  <script src="/js/islogin.js"></script>



  <link rel="stylesheet" href="/css/index.css">

    <!-- 导入文字的特效-->
    <link rel="stylesheet" href="/css/text_effect.css">
  <style>
    .img {
      width: 150px;
      height: 150px;
      position: absolute;
      left: 0px;
      top: 15px;
    }

    .p5 {
      position: absolute;
      text-align: center;
      width: 150px;
      top: -55px;
      font-size: 15px;
      color: white;
    }

    .p_style {
      position: absolute;
      text-align: center;
      width: 150px;
      bottom: 30px;
      font-size: 10px;
      color: white;
    }
  </style>

</head>

<body>

  <!-- 大容器：将整个窗口的宽度占满 -->
  <div class="container-fluid" style="height: 1000px;">
    <!-- div设置calss为row，会自动将row划分成12列 -->
    <div class="row">
      <!-- top -->
      <div class="container-fluid" style="height: 200px;">
        <!-- logo action -->
        <div class="row navbar navbar-expand navbar-dark  breadcrumb " style="height: 90px;">
          <div class="">
            <ol class="breadcrumb" id="breadcrumb_ol">
              <li class="breadcrumb-item"><a href="book.html">Home</a></li>

            </ol>
          </div>
          
          <div class="" style="height: 80px;position: relative;bottom: 10px;right: -400px;">
            <ul class="my_menu">
              <li><a href="#" class="action_item" id="my_center">个人中心</a></li>
              <li><a href="#" class="action_item" id="my_orders">我的订单</a></li>
            </ul>
            <br>
            <br>
            <ul class="my_menu" id="is_login">
              <!-- <li><a href="/woniumall2/html/login.html" class="action_item">登录</a></li>
              <li><a href="/woniumall2/html/login.html" class="action_item">免费注册</a></li> -->
            </ul>
          </div>
          <a class="navbar-brand text_effect" href="/woniumall2/index.html" style="font-size: 30px;position: relative;left: 300px;">蜗牛图书商城</a>

        </div>

        <!-- 菜单栏、导航栏 搜索 -->
        <div class="row   breadcrumb" style="height: 60px;">
          <div class="container" style="height: 60px;">
            <div class="row">

              <div class="col-4 offset-1 row" style="height: 60px;">

              </div>
              <div class="btn-group" style="height: 40px;">
                <button id="btn_text" type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" style="width: 80px;" value="-1">
                  默认选择
                </button>
                <div class="dropdown-menu" id="down_list">

                </div>

                <div class="form-inline" style="position: relative; right: -55px;">
                  <input id="search_text" class="form-control mr-sm-2" type="search" placeholder="Search"
                    aria-label="Search">
                  <button id="seach_btn" class="btn btn-outline-success my-2 my-sm-0">Search</button>
                </div>

                <div class="" style="position: relative;left: 70px;">
                  <a href="#" id="my_cart">
                    <img src="./images/bootstrap-icons/cart4.svg" alt="" width="32" height="32" title="Bootstrap">
                  </a>
                  <span id="cart_sums" class="badge badge-danger"
                    style="position: relative;top: -15px;right: 15px;">0</span>
                  <a href="#" style="position: relative;left: -5px;top: 5px;"
                    id="my_cart_image">我的购物车</a>
                </div>

                <!-- </div> -->
              </div>
              <!-- 购物车 -->

            </div>
          </div>
        </div>

      </div>

      <!-- 商品列表 
        container 小容器
      -->
      <div class="container" style="height: 800px;">
        <div class="row">
          <!-- 商品 -->
          <div class="col-sm-10" style="height: 800px;">
            <!-- 更多 -->
            <div class="row bg-secondary" style="height: 40px;">
              <h3 class="text-success">最新商品</h3>
            </div>
            <!-- 商品 -->
            <div class="row  clearfix text-center" id="goods_list">

            </div>
            <!-- 翻页按钮 start-->
            <div class="row text-center" style="align-content: center;position: relative;top: 10px;">
              <div class="col-lg-12">
                <button id="firstPage" class="btn btn-outline-success" btn-sm">首页</button>
                <button id="prevPage" class="btn btn-outline-success" btn-muted btn-sm">上一页</button>
                <span id="current_page" value="-1">1</span>
                <button id="nextPage" class="btn  btn-outline-success" btn-muted btn-sm">下一页</button>
                <button id="endPage" class="btn btn-outline-success" btn-muted btn-sm">尾页</button>
                <span>共:&nbsp;<mark><span id="total_page" class="">100</span></mark>&nbsp;页</span>
                &nbsp;<span>到</span>
                <span1><input type="text" class="border rounded-lg  is-valid" style="width: 40px;text-align: center;" id="goPage">
                  </span>
                  <span>页</span>
                  <button id="pageJump" type="button" class="btn btn-outline-success" data-toggle="tooltip"
                    data-placement="left" title="进入指定页">确定
                  </button>

              </div>

            </div>
            <hr>
            <!-- 翻页按钮 end -->

          </div>


          <!-- 热卖 -->
          <div class="col-2" style="height: 800px;margin: 0px;padding: 0px;position:relative;">
            <div class="bd-example lightbox-content" id="">
              <div id="images_div" class="carousel bg-dark" data-ride="carousel" style="height:300px">
                <ol id="images_ol" class="carousel-indicators slide">
                  <li data-target="#images_div" data-slide-to="0" class="active"></li>
                  <li data-target="#images_div" data-slide-to="1"></li>
                  <li data-target="#images_div" data-slide-to="2"></li>
                  <li data-target="#images_div" data-slide-to="3"></li>
                </ol>
                <div id="images_div_list" class="carousel-inner" style="height:300px;">

                </div>

                <a class="carousel-control-prev " href="#images_div" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon bg-dark" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next " href="#images_div" role="button" data-slide="next">
                  <span class="carousel-control-next-icon bg-dark" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>

          </div>
          
        </div>
      </div>
    </div>
  </div>
  <!-- 发送http请求 得到数据  -->





  <!-- 退出跳转start -->
  <div class="modal fade" id="quit_Popup" tabindex="-1" role="dialog" aria-labelledby="quit_Popup_label"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="quit_Popup_label">退出ing</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          正在退回到主页面
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="now_time">立刻跳转</button>

        </div>
      </div>
    </div>
  </div>
  <!-- 退出跳转start -->




</body>

</html>